<template>
    <div class="index">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center">
            王洋阳
        </span>
        <div class="srk">

            <div class="demo-input-suffix">
                <el-row :gutter="20">

                    <el-input v-model="input4" class="w-50 m-2" placeholder="输入关键词">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-row>
            </div>


            <!-- Form -->
            <el-button text @click="dialogFormVisible = true">
                <el-button type="primary">新增</el-button>
            </el-button>
            <el-dialog v-model="dialogFormVisible" title="新增">
                <el-form :model="list">
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="年龄" :label-width="formLabelWidth">
                        <el-input v-model="form.age" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                        <el-input v-model="form.dz" autocomplete="off" />
                    </el-form-item>

                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="tijiao()">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="xh" label="序号" width="180" />
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column prop="age" label="年龄" width="180" />
                <el-table-column prop="dz" label="地址" width="180" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button>{{ scope.row.cz1 }} </el-button>
                        <el-button type="danger">{{ scope.row.cz2 }}</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>


<script setup>

import { useUserInfoStore } from '@/stores/userinfo'

import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

var userInfoStore = useUserInfoStore()

var dialogFormVisible = ref(false)


const formLabelWidth = '140px'

var form = reactive({
    name: '',
    age: '',
    dz: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})


//确认
var tijiao = () => {
    console.log(1111);
    console.log(form.name);
    console.log(form.age);
    console.log(form.dz);
    let froms = ({ name: form.name }, { name: form.age }, { name: form.dz })
    userInfoStore.save_userinfo(froms)
    localStorage.setItem('name', form.name)
    localStorage.setItem('age', form.age)
    localStorage.setItem('dz', form.dz)
}


const input4 = ref('')
//表格
var name = localStorage.getItem('name')
var age = localStorage.getItem('age')
var dz = localStorage.getItem('dz')

const tableData = [
    {
        xh: '1',
        name: name,
        age: age,
        dz: dz,
        cz1: '编辑',
        cz2: '删除'
    },

]



</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.srk {
    width: 500px;
    display: flex;
    align-items: center;

}

.btn {
    margin-left: 20px;
}
</style>